<template>
  <div>
    <el-row>
      <el-card style="background-color: white; padding: 30px; padding-top: 5px">
        <el-col :span="6">
          <span>订单编号：</span>
          <span class="text">{{ date1.orderId }}</span>
        </el-col>
        <el-col :span="6">
          <span>运单编号：</span>
          <span class="text">{{ date1.id ? date1.id : "--" }}</span>
        </el-col>
        <el-col :span="6">
          <span>下单时间：</span>
          <span class="text">{{ date1.order.createTime }}</span>
        </el-col>
        <el-col :span="6">
          <span>订单状态：</span>
          <span class="text">{{ statusMap[date1.order.status] }}</span>
        </el-col>
        <el-col style="margin-top: 20px">
          <span>预计到达日期：</span>
          <span class="text">{{ date1.order.estimatedArrivalTime }}</span>
        </el-col>
      </el-card>
    </el-row>
    <!--    基本信息-->
    <el-row style="margin-top: 50px">
      <Xiangqing :title="'基本信息'">
        <template v-slot:one>
          <el-row style="margin: 50px">
            <el-col>
              <img
                style="width: 13px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 16px; margin-left: 6px">发货方</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>发货方姓名：</span>
              <span>{{ date1.order.senderName }}</span>
            </el-col>
            <el-col :span="10">
              <span>发货方电话：</span>
              <span>{{ date1.order.senderPhone }}</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>发货方地址：</span>
              <span
                >{{ date1.order.senderProvince.name }}
                {{ date1.order.senderCity.name }}
                {{ date1.order.senderCounty.name }}</span
              >
            </el-col>
            <el-col :span="10">
              <span>详细地址：</span>
              <span>{{ date1.order.senderAddress }}</span>
            </el-col>
            <el-col style="margin-top: 20px">
              <img
                style="width: 16px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 16px; margin-left: 6px">收货方</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>收货方姓名：</span>
              <span>{{ date1.order.receiverName }}</span>
            </el-col>
            <el-col :span="10">
              <span>收货方电话：</span>
              <span>{{ date1.receiverPhone }}</span>
            </el-col>
            <el-col style="margin-left: 25px" :span="12">
              <span>收货方地址：</span>
              <span
                >{{ date1.order.receiverProvince.name }}
                {{ date1.order.receiverCity.name }}
                {{ date1.order.receiverCounty.name }}</span
              >
            </el-col>
            <el-col :span="10">
              <span>详细地址：</span>
              <span>{{ date1.order.receiverAddress }}</span>
            </el-col>
            <el-col style="margin-top: 20px">
              <img
                style="width: 16px; height: 16px"
                alt=""
                src=""
              />
              <span style="font-size: 14px; margin-left: 6px; margin-right: 4px"
                >距离</span
              >
              <span>{{ date1.order.distance }}km</span>
            </el-col>
            <el-col style="margin-top: 20px; margin-left: 20px">
              <span style="font-size: 16px; margin-left: 6px">备注：</span>
              <span>暂无</span>
            </el-col>
          </el-row>
        </template>
      </Xiangqing>
    </el-row>
    <!--    运输信息-->
    <el-row style="margin-top: 50px">
      <xiangqing :title="'运输信息'">
        <template #eight>
          <el-empty
            v-if="!date1.taskTransports"
            image="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png"
          ></el-empty>
          <!--          <el-steps v-else :space="200" :active="1" finish-status="success">-->
          <!--            <el-step title="已完成"></el-step>-->
          <!--            <el-step title="进行中"></el-step>-->
          <!--            <el-step title="步骤 3"></el-step>-->
          <!--          </el-steps>-->
        </template>
      </xiangqing>
    </el-row>
    <!--    货品信息-->
    <el-row style="margin-top: 50px">
      <huo-message :tabelDate="tabelDate"></huo-message>
    </el-row>
  </div>
</template>

<script>
import { getDateApi } from "@/api/business";
import Xiangqing from "@/views/business/components/Xiangqing.vue";
import HuoMessage from "@/views/business/components/HuoMessage.vue";

export default {
  components: { HuoMessage, Xiangqing },
  data() {
    return {
      id: this.$route.params.id,
      tabelDate: [],
      date1: {
        transportOrder: "",
        estimatedArrivalTime: "",
      },
      statusMap: {
        23000: "待取件",
        23001: "已取件",
        23005: "运输中",
        23008: "派送中",
        23009: "已签收",
        23010: "拒收",
        23011: "已取消",
      },
    };
  },
  created() {
    this.getDateInfo();
  },
  methods: {
    async getDateInfo() {
      const res = await getDateApi(this.id);
      console.log(res.data.data);
      this.date1 = res.data.data;
      this.tabelDate = res.data.data.order.orderCargoDTOS;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  padding-bottom: 20px;
  ::v-deep .text {
    color: #818693;
    font-size: 14px;
  }
}
</style>
